<template>
  <n-el tag="div" class="main-box">
    <n-el tag="div" class="item-box" v-for="item in props.data" :key="item" @click="handleClick(item)">
      <n-space justify="center">
<!--        <n-image-->
<!--            width="280"-->
<!--            height="280"-->
<!--            :src="item.image"-->
<!--        />-->
      </n-space>
      <n-space justify="start">
        <n-ellipsis class="item-title" :line-clamp="2" style="color: white">
          {{item.title}}
          <template #tooltip>
            <n-el tag="div" style="text-align: center">
              {{item.title}}
              <br>
              {{item.subtitle}}
            </n-el>
          </template>
        </n-ellipsis>
      </n-space>
      <n-space justify="start">
        <n-el tag="span" class="item-price" >￥ {{item.price}}</n-el>
      </n-space>
      <n-space justify="space-between">
        <n-el tag="span" class="item-city" >{{item.city}}</n-el>
        <n-el tag="span" class="item-sellNum" >已售 {{item.sellNum}} 件</n-el>
      </n-space>
    </n-el>
  </n-el>
</template>

<script setup lang="ts">

import defaultImage from "/@assets/header.png";

// eslint-disable-next-line no-undef
const props = defineProps({
  data:{
    type: Array,
    default: () => [
      {
        image: defaultImage,
        title: "物品标题",
        subtitle: "物品描述",
        price: 10000,
        sellNum: 10000,
        city: "重庆 九龙坡",
      },
    ],
  },
});

//定义派发事件
const emit = defineEmits(["getItem"]);

// 点击事件 由父组件实现
const handleClick = (item: any) => {
  emit("getItem", item);
};

</script>

<style scoped lang="scss">

.main-box{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item-box{
  width: 280px;
  height: 370px;
  background: rgba(162, 161, 161, 0.13);
  margin: 10px;
}

.item-title{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-price{
  color: #ff6201;
  font-size: 24px;
  line-height: 24px;
}

.item-sellNum{
  color: #ffffff;
  font-size: 12px;
}

.item-city{
  color: #ffffff;
  font-size: 12px;
}

</style>
